<template>
  <el-descriptions v-bind="$attrs">
    <el-descriptions-item
      v-for="(item, index) in columns"
      :key="`shower-desc-${index}`"
      :span="item.span ? item.span : 1"
    >
      <template #label>{{ item.label }}</template>
      <template v-if="item.type == 'slot'">
        <slot :column="item" :data="detail" :name="`shower_${item.field}`">
          #shower_{{ item.field }}="{ column, data }"
        </slot>
      </template>
      <template v-else-if="item.type == 'audio'">
        <audio ref="audioPlayer" :src="detail[item.field]" controls>
          您的浏览器暂不支持播放该视频，请升级至最新版浏览器。
        </audio>
      </template>
      <template v-else-if="item.type == 'video'">
        <video ref="videoPlayer" controls width="600">
          <source :src="detail[item.field]" />
          您的浏览器暂不支持播放该视频，请升级至最新版浏览器。
        </video>
      </template>
      <template v-else-if="item.type == 'image'">
        <Imager :url="detail[item.key]" :width="96" height="96" />
      </template>
      <!-- 关联模型 -->
      <template v-else-if="item.related">
        {{ item.key ? detail[item.related][item.key] : detail[item.related][item.field] }}
      </template>
      <template v-else>
        {{ detail[item.field] }}
      </template>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">
  defineOptions({
    name: 'ShowerEmbed',
  })

  defineProps<ShowerEmbedProps>()

  export interface ShowerEmbedProps {
    columns: object
    detail: object
  }

  // const getImageUrl = computed(() => {
  //   return (url: string) => getImage(url)
  // })
</script>
